<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>路径可视化 - 实时点位和占用状态</title>
    <script src="https://unpkg.com/cytoscape@3.26.0/dist/cytoscape.min.js"></script>
    <style>
        #cy {
            width: 100%;
            height: 600px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            margin-top: 10px;
        }
        label {
            display: inline-block;
            width: 80px;
            margin-right: 10px;
        }
        input {
            width: 200px;
            margin-bottom: 10px;
        }
        button {
            padding: 6px 12px;
            font-size: 16px;
            margin-bottom: 10px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<h2>路径可视化 - 实时点位和占用状态</h2>

<div>
    <label for="agvName">AGV名称:</label>
    <input type="text" id="agvName" placeholder="可选" />
    <button id="refreshBtn">手动刷新</button>
</div>

<div id="cy"></div>

<script>
    let cy = null;

    async function fetchCurrentNodes(agvName) {
        const params = new URLSearchParams();
        if (agvName) params.append('agvName', agvName);
        const res = await fetch('/graph/getCurrentNode', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: params.toString()
        });
        return await res.json();
    }

    async function fetchOccupiedNodes() {
        const res = await fetch('/graph/listOccupiedNode', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: ""
        });
        return await res.json();
    }

    async function fetchGraphElements() {
        const res = await fetch('/graph/status/live', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: ""
        });
        return await res.json();
    }

    async function loadGraph() {
        try {
            const agvName = document.getElementById('agvName').value.trim();
            const [currentNodes, occupiedNodes, graphData] = await Promise.all([
                fetchCurrentNodes(agvName),
                fetchOccupiedNodes(),
                fetchGraphElements()
            ]);

            if (cy) cy.destroy();

            graphData.elements.nodes = graphData.elements.nodes.map(n => {
                if (currentNodes.includes(n.data.id)) n.data.current = true;
                if (occupiedNodes.includes(n.data.id)) n.data.occupied = true;
                return n;
            });

            cy = cytoscape({
                container: document.getElementById('cy'),
                elements: graphData.elements,
                style: [
                    {
                        selector: 'node',
                        style: {
                            'label': 'data(label)',
                            'text-valign': 'center',
                            'color': '#000',
                            'background-color': '#007bff',
                            'width': 40,
                            'height': 40,
                            'font-size': 14
                        }
                    },
                    {
                        selector: 'node[current]',
                        style: {
                            'background-color': '#ff5722',
                            'border-color': '#000',
                            'border-width': 3
                        }
                    },
                    {
                        selector: 'node[occupied]',
                        style: {
                            'background-color': '#6c757d',
                            'border-color': '#333',
                            'border-width': 2
                        }
                    },
                    {
                        selector: 'edge',
                        style: {
                            'width': 4,
                            'line-color': '#999',
                            'target-arrow-color': '#999',
                            'target-arrow-shape': 'triangle',
                            'curve-style': 'bezier'
                        }
                    },
                    {
                        selector: 'edge[bidirectional = "true"]',
                        style: {
                            'source-arrow-color': '#999',
                            'source-arrow-shape': 'triangle'
                        }
                    }
                ],
                layout: {
                    name: 'cose',
                    animate: true,
                    padding: 20
                }
            });
        } catch (e) {
            alert('加载图数据失败: ' + e.message);
            console.error(e);
        }
    }

    document.getElementById('refreshBtn').addEventListener('click', loadGraph);
    window.onload = loadGraph;
</script>
</body>
</html>
